<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">

          <a-col :md="4" :sm="8">
            <a-form-item label="应用名称">
              <j-input placeholder="请输入应用名称" v-model="queryParam.appName" ></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="应用编码">
              <j-input placeholder="请输入应用编码" v-model="queryParam.appCode"></j-input>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="7">
            <a-form-item label="应用类型">
              <j-dict-select-tag v-model="queryParam.appType" dictCode="APP_TYPE" placeholder="请选择"></j-dict-select-tag>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="6">
            <a-form-item label="是否有效">
              <j-dict-select-tag v-model="queryParam.isEnable" dictCode="valid_status" placeholder="请选择"></j-dict-select-tag>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-has="'myApp:edit'" >编辑</a>
          <a-divider type="vertical" v-has="'myApp:edit'"/>
          <span v-if="record.appType =='2' || record.appType =='3'">
            <a @click="permission(record)" v-has="'myApp:permission'">菜单管理</a>
            <a-divider type="vertical" v-has="'myApp:permission'"/>
          </span>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)" v-has="'myApp:detail'">详情</a>
              </a-menu-item>
              <a-menu-item v-if="record.appType =='2' || record.appType =='3'">
                <a @click="authority(record)" v-has="'myApp:authority'">权限管理</a>
              </a-menu-item>
              <a-menu-item v-if="record.appType =='2' || record.appType =='3'">
                <a @click="appRole(record)" v-has="'myApp:appRole'">应用角色管理</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="handleChildApp(record.id)" v-has="'myApp:childSysConfig'">子系统配置</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <sys-app-modal ref="modalForm" @ok="modalFormOk"></sys-app-modal>
    <sys-child-app-modal ref="childAppModalForm" ></sys-child-app-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin.js'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin.js'
  import SysAppModal from './modules/SysAppModal.vue'
  import SysChildAppModal from './modules/SysChildAppModal';
  import { TENANT_ID } from '@/store/mutation-types';
  import Vue from 'vue';
  import { api } from './service.js'
  import { routerUri } from '@/api/common.js'

  export default {
    name: 'MyAppList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      SysChildAppModal,
      SysAppModal
    },
    data() {
      let that = this;
      return {
        description: '应用管理页面',
        // 表头
        columns: [
          {
            title: '#',
            align: 'center',
            dataIndex: 'rowIndex',
            key: 'rowIndex',
            width: 60,
            customRender: function (t, r, index) {
              return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
            }
          }, {
            title: '应用名称',
            dataIndex: 'appName'
          }, {
            title: '应用编号',
            dataIndex: 'appCode'
          },
          {
            title: '应用类型',
            dataIndex: 'appTypeName'
          },
          {
            title: '所属系统',
            dataIndex: 'systemName'
          },
          {
            title: '应用URL',
            dataIndex: 'appUrl'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 200,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: api.myList(Vue.ls.get(TENANT_ID)),
          delete: '',
          deleteBatch: ''
        },
        dictOptions: {}
      }
    },
    created() {
    },
    methods: {
      initDictConfig() {
      },
      permission(record) {
        this.$router.push({ name: routerUri.appPermissionList, params: { id: record.id, appName: record.appName } })
      },
      authority(record) {
        this.$router.push({ name: routerUri.appAuthorityList, params: { id: record.id, appName: record.appName } })
      },
      appRole(record) {
        this.$router.push({ name: 'auth-roles-app-roles', params: { id: record.id, appName: record.appName } })
      },
      handleChildApp(appId) {
        let tenantId = Vue.ls.get(TENANT_ID);
        this.$refs.childAppModalForm.show(tenantId, appId);
      },
      delApp(id) {
        this.url.delete = api.delete(id);
        this.handleDelete(id);
      },
      delBatchApp() {
        let ids = '';
        for (let a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ',';
        }
        this.url.deleteBatch = api.delete(ids);
        this.batchDel();
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
